<template>
    <div class="main_box">
        <h1>这个案例主要是 vue3的 函数中 Typescript写法</h1>

        <div class="main_row">具体用法见组件内代码</div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';

// 1.约定入参类型，和返回值类型（void表示无返回值）
const clickFn = (event: MouseEvent, type: string): void => {};

enum TypeName {
    success,
    error = 2,
    warning
} // 相当于对象 {0: 'success', 2: 'error', 3: 'warning', success: 'success', error: 2, warning: 'warning'}

// 2.约定入参类型，和返回值类型(返回值类型用枚举), 状态码和状态名通常是固定的，使用枚举就不用switch判断了
const getType = (type: number | string): TypeName => {
    return TypeName[type as keyof typeof TypeName]; // 使用类型断言将 type 转换为 TypeName 的键
};
// console.log(getType(2)); // 打印 error
// console.log(getType('error')); // 打印 2

// 3.非必传参数和不固定参数约束
const getFn1 = (type?: string, ...args: any[]): void => {
    // 参数type非必传，args参数个数不固定，类型是any
};

// 4.对象任意属性约束
const getFn2 = (params: { [key: string]: any }): void => {};
// eg: getFn2({a:1, B: '哈哈'})

// 5.泛型
const getFn3 = <T, K>(params: T, key: K): void => {
    // 泛型就是参数类型不固定，由传入的参数params和key进行类型推导，由调用者决定
};
// eg: getFn3(1, 'a')  getFn3('a', 1)
</script>

<style lang="scss" scoped></style>
